feat: Wire heatmap chart into dashboard editor and tile rendering#2107
feat: Wire heatmap chart into dashboard editor and tile rendering#2107kodiakhq[bot] merged 39 commits intomainfrom
Conversation
- Add Heatmap tab to chart editor form with IconGrid3x3 icon - Create HeatmapSeriesEditor with value expression (Y-axis) and count expression (intensity) inputs - Add heatmap display type to displayTypeToActiveTab mapping - Add heatmap preview rendering in ChartPreviewPanel - Add heatmap tile rendering in DBDashboardPage - Add heatmap validation: single series, required value expression - Constrain heatmap to single series (no Add Series / ratio) Co-authored-by: Alex Fedotyev <[email protected]>
🦋 Changeset detectedLatest commit: 0ee9fa5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
E2E Test Results✅ All tests passed • 159 passed • 3 skipped • 1192s
Tests ran across 4 shards in parallel. |
…ormat, reduce chart whitespace - When switching to Heatmap with a trace source, auto-fill value expression with getDurationMsExpression and set numberFormat to duration with factor 0.001 for proper Y-axis labels (4ms, 100ms, 1.2s) - Pass numberFormat from config through to DBHeatmapChart in both ChartPreviewPanel and DBDashboardPage for correct tick formatting - Reduce Stack gap in ChartContainer from default to 4px to minimize whitespace above the chart area Co-authored-by: Alex Fedotyev <[email protected]>
Co-authored-by: Alex Fedotyev <[email protected]>
…ctivity in editor/dashboard - Add effect to populate duration defaults when source changes while already in heatmap mode (not just when switching to heatmap tab) - Disable drag-to-select and hide 'Click & Drag' prompt in Heatmap when onFilter is not provided (chart editor and dashboard contexts) - Keep hover tooltip with Y/Count values for read-only inspection Co-authored-by: Alex Fedotyev <[email protected]>
…ngs button for heatmap - Fill Value field with getDurationMsExpression and Count field with count() when switching to Heatmap with a trace source (visible text, not just behind the scenes) - Add Display Settings button below heatmap editor, same pattern as other chart types, opening ChartDisplaySettingsDrawer for number format configuration Co-authored-by: Alex Fedotyev <[email protected]>
…hboards - Extract HeatmapSettingsDrawer into shared component used by both search Event Deltas and chart editor/dashboard contexts - Remove Value/Count fields from the main heatmap editor form — move them into the Heatmap Settings drawer (Scale, Value, Count) - Replace 'Display Settings' button with 'Heatmap Settings' button that opens the same drawer as search Event Deltas gear icon - Pass scaleType (log/linear) from form state through to DBHeatmapChart in preview panel and dashboard tiles - Pre-populate Value with getDurationMsExpression and Count with count() from data source config, editable via Heatmap Settings Co-authored-by: Alex Fedotyev <[email protected]>
…artContainer gap - Add padding: [8,0,0,0] to uPlot options to reduce whitespace above the topmost Y-axis tick in heatmap charts - Set lockScroll=false on HeatmapSettingsDrawer to prevent layout shift when opening settings inside a dashboard edit modal - Restore ChartContainer gap to 'xs' (was incorrectly set to 4px affecting all chart types) Co-authored-by: Alex Fedotyev <[email protected]>
…ChartContainer changes - Wrap HeatmapSettingsDrawer in Portal so it doesn't participate in the flex layout of the editor form, preventing content shift when opening/closing settings in dashboard edit modal - Revert ChartContainer gap/margin changes to preserve existing spacing for all chart types Co-authored-by: Alex Fedotyev <[email protected]>
Pass autoRun to EditTimeChartForm in the dashboard edit modal so saved charts (including heatmaps) render their preview immediately when opened for editing, matching the Chart Explorer behavior. Co-authored-by: Alex Fedotyev <[email protected]>
Co-authored-by: Alex Fedotyev <[email protected]>
… layout shift Move the HeatmapSettingsDrawer out of HeatmapSeriesEditor and render it at the EditTimeChartForm top level (same pattern as ChartDisplaySettingsDrawer). This prevents any DOM insertion from affecting the flex layout between the settings button and run button when the drawer opens/closes. Co-authored-by: Alex Fedotyev <[email protected]>
🔴 Tier 4 — CriticalTouches auth, data models, config, tasks, OTel pipeline, ClickHouse, or CI/CD. Why this tier:
Review process: Deep review from a domain expert. Synchronous walkthrough may be required. Stats
|
PR Review
|
…le form, revert ChartContainer - Extract toHeatmapChartConfig() helper into DBHeatmapChart.tsx, eliminating duplicated config construction and unsafe casts in DBDashboardPage and ChartPreviewPanel - Export HeatmapChartConfig and HeatmapSelectExtras types for typed access to countExpression and heatmapScaleType on select items - Add useEffect to sync HeatmapSettingsDrawer form when defaultValues change (prevents stale closure when source changes while drawer open) - Fully revert ChartContainer to original (no gap change) Co-authored-by: Alex Fedotyev <[email protected]>
Co-authored-by: Alex Fedotyev <[email protected]>
pulpdrew
left a comment
There was a problem hiding this comment.
Looking good! A couple more comments.
Also, just re-confirming we have a followup issue for the external dashboards API support?
Also another idea (non blocking) - it would be nice to show the heatmap legend in the chart explorer/dashboard tile version as well.
pulpdrew
left a comment
There was a problem hiding this comment.
Looking good! A couple more comments.
Also, just re-confirming we have a followup issue for the external dashboards API support?
Also another idea (non blocking) - it would be nice to show the heatmap legend in the chart explorer/dashboard tile version as well.
- Narrow `heatmapScaleType` schema from `string` to `enum(['log','linear'])`, removing the defensive ternaries in DBHeatmapChart and EditTimeChartForm that were re-validating the value at runtime. - Fix tab-switch bug: when entering Heatmap from Search, `select` was still a string when the heatmap-defaults branch checked for an array, so the defaults never applied and the query errored. Restructure the displayType- change effect so the Heatmap branch covers both string and array `select`. - Drop redundant `as` cast in HeatmapSettingsDrawer scaleType handler in favor of an inline type guard. - Add `showLegend` prop to DBHeatmapChart; enable it on the chart-editor preview and dashboard tile so the heatmap shows a compact gradient legend in the toolbar (search keeps its existing delta-chart legend). - Migrate DBSearchHeatmapChart to use `toHeatmapChartConfig` instead of building the heatmap config inline, so all three call sites share the same transform.
…editor-dashboard-5801
|
@pulpdrew round 2 pushed in 4e1d46d + 7ec8cad (merge of latest main). Replied on each thread; quick recap: Addressed in this round
External Dashboards API followupFiled HDX-4120 — External Dashboards API: support DisplayType.Heatmap. Assigned to you, scoped under the External API project, parented to HDX-3993. Covers OpenAPI enum extension, schema for ParkedMV-indicator fix + SQL preview — these are tied together (the right config to feed |
Heatmap runs as two sequential ClickHouse queries (a bounds query feeding
min/max into a bucketed-counts query), so a single SQL preview misrepresents
what actually executes. Render both queries labeled in the editor's
"Generated SQL" accordion; the bucket query uses {min}/{max} placeholder
tokens since those literals are only known once the bounds query returns.
Also suppress the MV optimization indicator on the heatmap tab — neither of
the two queries is what the editor's chart config alone would produce, so
the indicator was misleading. Per Drew's review feedback on PR #2107.
Refactor: extract buildHeatmapBoundsConfig / buildHeatmapBucketConfig from
DBHeatmapChart's HeatmapContainer to top-level exports so the SQL preview
can reuse them. No behavioral change to the live chart.
Caught by CI lint (no-unused-vars). Local --quiet eslint missed these because the rule severity differs locally.
Add a Heatmap step to the Custom Dashboards walkthrough covering: - when to use a heatmap vs a Line chart (distribution shape over time) - that the data source dropdown is restricted to Traces sources (logs, metrics, and session sources are filtered out, since heatmaps need the source's Duration Expression for span duration) - the pre-filled Value (`(Duration)/1e6`) and Count (`count()`) once a source is selected - using `Where` and the time range to scope the heatmap to a service or set of operations the user wants to observe, with wider ranges making bimodal latency patterns easier to spot - the Display Settings drawer (Scale / Value / Count), with a cross-link to the Event Deltas page where the full settings table already lives - the two-query model (bounds + bucket) visible in the editor SQL preview - a Drill down to Event Deltas subsection: clicking a cell on a rendered tile reveals a "View in Event Deltas" action that opens the Event Deltas view with the tile's data source, Where clause, and time range carried over Cross-link the existing Event Deltas "Customize the heatmap" section to the new dashboard tile flow so users discovering the feature in either place find the other. Screenshots are captured in dark theme to match neighbouring sections, with `ServiceName:"payment"` over 24h to surface the bimodal duration distribution that makes a heatmap worth using. Closes ClickHouse#6146 Refs hyperdxio/hyperdx#2107
## Summary - Drop the `export` from `HeatmapChartConfig` in `packages/app/src/components/DBHeatmapChart.tsx`. No external file imports the type by name; consumers (`DBDashboardPage`, `ChartPreviewPanel`, `DBSearchHeatmapChart`) use the inferred return of `toHeatmapChartConfig(...)`. The type stays in use locally for the function return shape and prop annotations. ## Why OSS knip 6.0.1 happens not to flag this. EE's lockfile resolved knip to 6.0.3 after the recent divergence, and the stricter minor flags inferred-only exports as unused. Result: every heatmap-touching downstream merge into `DeploySentinel/hyperdx-ee` fails knip on this single line and needs a manual fixup. Most recent occurrence: DeploySentinel/hyperdx-ee#1997 (heatmap wire-up upstream merge of #2107). Dropping the export here lets the next merge cycle pass cleanly. Behavior-neutral. No runtime impact. No changeset (not user-visible). ## Test plan - [x] `yarn nx run @hyperdx/common-utils:ci:build` - [x] `yarn nx run @hyperdx/app:ci:lint` - [x] `yarn knip:ci` (`{"issues":[]}`, exit 0)
What
Wires the existing
DBHeatmapChartcomponent andDisplayType.Heatmapenum into the chart editor, dashboard tile rendering, and unifies display settings across all heatmap contexts (search Event Deltas, chart editor, dashboards).Why
Users should be able to create and view heatmap charts from the chart editor and dashboards, alongside existing chart types. Heatmaps visualize distributions over time (e.g., latency distributions) and were previously only available in the search Event Deltas view.
Changes
Shared Display Settings Drawer (
HeatmapSettingsDrawer.tsx):DBSearchHeatmapChart.tsxinto a reusable componentdefaultValuesmemoized at call sites to prevent unnecessary form resetsChart Editor (
EditTimeChartForm,ChartEditorControls,HeatmapSeriesEditor):IconGrid3x3icongetDurationMsExpression(source)andcount()when a Trace source is selected (on tab switch or source change)numberFormat: { output: 'duration', factor: 0.001 }for proper Y-axis labelsHeatmapContainer)Dashboard Tiles (
DBDashboardPage):HeatmapTilecomponent rendersDBHeatmapChartviatoHeatmapChartConfig()helperautoRunpassed toEditTimeChartFormin dashboard edit modal so saved charts preview immediatelynumberFormatandscaleTypepassed through from saved configChart Preview (
ChartPreviewPanel):HeatmapPreviewcomponent renders heatmap in the chart editor preview areaHeatmap UX improvements (
DBHeatmapChart.tsx):ctx.measureText()— measures actual formatted tick labelsformatDurationMsCompact):minstead ofmin, values under 2min stay as seconds, fewer decimalsgap: 10+space: 60prevents label overlap in narrow containerspadding: [8, 8, 0, 4]prevents label clipping at edgesonFilteris not provided (editor/dashboard); hover tooltip still shows for inspectiononFilteris wiredConfig helper (
toHeatmapChartConfig):HeatmapChartConfigformatHeatmapChartConfigtype fromDBHeatmapChart.tsx